import React, {FC, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from "react";
import "./css/TabsPage.less";
import {Menu} from "antd";
import {getLocale} from "../../../i18n/i18n";
import {loadMenuChild, openEditUrl} from "../../services/MenuService";
import {importComponent, strToObject, treeMapAsync} from "../../utils";
import {useTranslation} from "react-i18next";
import {GlobalErr} from "../../global/GlobalErr.tsx";

interface TabsPageProps {
    menuId: string,
    row: any,
    currentNum?: number,
    init: any
}

const TabsPage: FC<TabsPageProps> = (props) => {
    const {t} = useTranslation();

    const refRef: any = useRef()

    const [menu, setMenu] = useState<any>(),
        [selectMenu, setSelectMenu] = useState<any>();

    const onSelect = useCallback(({item, key}: { item: any, key: any }) => {
        setSelectMenu({
            key: key,
            label: getLocale(item.props.labelCn, item.props.labelEn),
            labelCn: item.props.labelCn,
            labelEn: item.props.labelEn,
            dom: item.props.dom,
            comProp: item.props.comProp
        })
    }, []);

    const loadMenus: Function = useCallback(async () => {
        const {menuId, currentNum = 0}: { menuId: string, currentNum: number } = props;
        let newMenus = await loadMenuChild({parentId: menuId, menuType: "MENU"});
        let menus: any[] = await treeMapAsync(newMenus, async (child: any[], node: any) => {
            let comProp = node.operate ? strToObject(node.operate) : {};
            if (!node.subassembly) {
                comProp.errContent = (<div>
                            <span className={"sf_core_link"} onClick={() => {
                                openEditUrl(node.id)
                            }}>{node.id}</span>
                    <span>{t("unComPath")}</span>
                </div>);
            }

            return {
                key: node.id,
                label: getLocale(node.zhCn, node.usEn, node.ptBr),
                labelCn: node.zhCn,
                labelEn: node.usEn,
                labelPt: node.ptBr,
                dom: node.subassembly ? await importComponent(node.subassembly) : GlobalErr,
                comProp: comProp,
                children: child && child.length ? child : null
            }
        });
        setSelectMenu(menus[currentNum] ? menus[currentNum] : menus[0]);
        setMenu(menus);
    }, [props.menuId]);

    useEffect(() => {
        loadMenus();
    }, [props.menuId]);

    useImperativeHandle(props.init, () => {
        return {
            ...refRef.current,
            selectMenu: selectMenu
        };
    });

    const renderTabsPageMenu = useMemo(() => {
        if (!menu || !selectMenu) {
            return null
        }
        if (menu.length < 2) {
            return null;
        }
        return (<div className="sf_core_tabs_page_menu">
            <Menu mode="horizontal" items={menu} onSelect={onSelect} selectedKeys={[selectMenu.key]}/>
        </div>)
    }, [menu, selectMenu])

    const renderTabsPage = useMemo(() => {
        if (!menu || !selectMenu) {
            return null
        }
        let Com = selectMenu.dom;
        return (
            <div className="sf_core_tabs_page">
                {renderTabsPageMenu}
                <div className="sf_core_tabs_page_content">
                    <Com key={selectMenu.key} menuId={selectMenu.key} {...selectMenu.comProp} row={props.row}
                         init={refRef}/>
                </div>
            </div>
        )
    }, [menu, selectMenu, props.row]);

    return (renderTabsPage)
};

export default React.memo(TabsPage);